<template>
    <!-- 头部导航 start-->
    <header id="header">
      <div class="container-fluid">
        <div class="navbar">
          <div class="logo">
            <img :src="logoUrl" />
            <span>恋爱密室</span>
          </div>
          <div class="navigation-row">
            <nav id="navigation">
              <!-- <button type="button" class="navbar-toggle"> <i class="fa fa-bars"></i> </button> -->
              <div class="nav-box navbar-collapse">
                <ul class="navigation-menu nav navbar-nav navbars webnav" id="nav">
                  <li data-menuanchor="slide01" class="active">
                    <router-link :to="{name:'index'}">首页</router-link>
                  </li>
                  <li data-menuanchor="slide02">
                    <router-link to="/dynaPage">动态</router-link>
                  </li>
                  <li data-menuanchor="slide03">
                    <router-link to="/aboutPage">关于我们</router-link>
                  </li>
                  <li data-menuanchor="slide04">
                    <router-link to="/downPage">下载</router-link>
                  </li>
                </ul>
              </div>
            </nav>
          </div>
        </div>
      </div>
    </header>
    <!-- 头部导航 end -->
</template>
<script>
export default {
    name:"headNav",
    data () {
        return {
            logoUrl: require("@/assets/article/logo.png"),
        }
    }
}
</script>
<style scoped>
@import "../assets/home/home.css";
</style>